<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>数据分析与挖掘</title>
    <style>
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
        .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .card-header { font-weight: bold; font-size: 18px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
        .tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
        .tab { padding: 10px 15px; cursor: pointer; border-bottom: 2px solid transparent; }
        .tab.active { border-bottom: 2px solid var(--primary-color); color: var(--primary-color); font-weight: bold; }
        .grid-layout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
        .btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn-primary { background-color: var(--primary-color); color: white; }
        .btn-secondary { background-color: #f5f5f5; color: #333; border: 1px solid #ddd; }
        .btn-sm { padding: 4px 8px; font-size: 12px; }
        .filter-row { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter-item { min-width: 200px; }
        .filter-item label { display: block; margin-bottom: 5px; font-size: 14px; }
        .filter-item select, .filter-item input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .analysis-tool { padding: 15px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 15px; }
        .analysis-tool-header { font-weight: bold; margin-bottom: 10px; display: flex; justify-content: space-between; }
        .analysis-result { margin-top: 20px; padding: 15px; background-color: #f9f9f9; border-radius: 8px; }
        .insight-item { padding: 15px; border-left: 3px solid var(--primary-color); background-color: #f9f9f9; margin-bottom: 15px; }
        .insight-title { font-weight: bold; margin-bottom: 5px; }
        .insight-description { font-size: 14px; color: #555; }
        .insight-metrics { display: flex; gap: 20px; margin-top: 10px; }
        .insight-metric { text-align: center; }
        .insight-metric-value { font-weight: bold; font-size: 18px; }
        .insight-metric-label { font-size: 12px; color: #666; }
        .model-card { padding: 15px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 15px; }
        .model-title { font-weight: bold; margin-bottom: 5px; }
        .model-meta { font-size: 14px; color: #666; margin-bottom: 10px; }
        .model-actions { display: flex; gap: 10px; margin-top: 10px; }
        .chart-container { height: 300px; margin-bottom: 20px; }
        .correlation-matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 15px; }
        .correlation-cell { padding: 10px; text-align: center; border-radius: 4px; }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="container">
            <div class="header">
                <h1>数据分析与挖掘</h1>
                <div>
                    <button class="btn btn-primary" onclick="createAnalysis()">创建分析</button>
                </div>
            </div>
            
            <div class="tabs">
                <div class="tab active" onclick="switchTab('insights')">分析洞察</div>
                <div class="tab" onclick="switchTab('tools')">分析工具</div>
                <div class="tab" onclick="switchTab('models')">预测模型</div>
                <div class="tab" onclick="switchTab('trends')">趋势探索</div>
            </div>
            
            <!-- 分析洞察标签内容 -->
            <div id="insights-content" class="tab-content">
                <div class="filter-row">
                    <div class="filter-item">
                        <label>业务领域</label>
                        <select id="businessAreaFilter">
                            <option value="">所有领域</option>
                            <option value="sales">销售</option>
                            <option value="marketing">市场</option>
                            <option value="service">客服</option>
                            <option value="product">产品</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>时间范围</label>
                        <select id="timeRangeFilter">
                            <option value="">所有时间</option>
                            <option value="week">过去一周</option>
                            <option value="month">过去一个月</option>
                            <option value="quarter">过去一个季度</option>
                            <option value="year">过去一年</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>重要性</label>
                        <select id="importanceFilter">
                            <option value="">所有级别</option>
                            <option value="high">高</option>
                            <option value="medium">中</option>
                            <option value="low">低</option>
                        </select>
                    </div>
                </div>
                
                <div class="insight-list">
                    <div class="insight-item">
                        <div class="insight-title">高价值客户流失风险上升</div>
                        <div class="insight-description">
                            过去30天内，高价值客户互动减少20%，续约意向下降15%。数据显示，专注于B2B行业的客户最容易流失。
                        </div>
                        <div class="insight-metrics">
                            <div class="insight-metric">
                                <div class="insight-metric-value">20%</div>
                                <div class="insight-metric-label">互动减少</div>
                            </div>
                            <div class="insight-metric">
                                <div class="insight-metric-value">15%</div>
                                <div class="insight-metric-label">续约意向下降</div>
                            </div>
                            <div class="insight-metric">
                                <div class="insight-metric-value">8</div>
                                <div class="insight-metric-label">高风险客户</div>
                            </div>
                        </div>
                        <div style="margin-top: 10px;">
                            <button class="btn btn-sm btn-secondary" onclick="viewInsightDetails(1)">查看详情</button>
                            <button class="btn btn-sm btn-secondary" onclick="createAction(1)">创建行动计划</button>
                        </div>
                    </div>
                    
                    <div class="insight-item">
                        <div class="insight-title">新产品特性采用率远高于预期</div>
                        <div class="insight-description">
                            上月推出的协同工作功能在首周获得了78%的用户采用率，远高于预期的45%。用户反馈积极，NPS得分达85。
                        </div>
                        <div class="insight-metrics">
                            <div class="insight-metric">
                                <div class="insight-metric-value">78%</div>
                                <div class="insight-metric-label">采用率</div>
                            </div>
                            <div class="insight-metric">
                                <div class="insight-metric-value">45%</div>
                                <div class="insight-metric-label">预期采用率</div>
                            </div>
                            <div class="insight-metric">
                                <div class="insight-metric-value">85</div>
                                <div class="insight-metric-label">NPS得分</div>
                            </div>
                        </div>
                        <div style="margin-top: 10px;">
                            <button class="btn btn-sm btn-secondary" onclick="viewInsightDetails(2)">查看详情</button>
                            <button class="btn btn-sm btn-secondary" onclick="createAction(2)">创建行动计划</button>
                        </div>
                    </div>
                    
                    <div class="insight-item">
                        <div class="insight-title">销售周期长度与成交率相关性发现</div>
                        <div class="insight-description">
                            分析显示，销售周期超过45天的机会成交率降低35%。重点产品演示和及时跟进是缩短销售周期的关键因素。
                        </div>
                        <div class="insight-metrics">
                            <div class="insight-metric">
                                <div class="insight-metric-value">45天</div>
                                <div class="insight-metric-label">临界点</div>
                            </div>
                            <div class="insight-metric">
                                <div class="insight-metric-value">-35%</div>
                                <div class="insight-metric-label">成交率影响</div>
                            </div>
                            <div class="insight-metric">
                                <div class="insight-metric-value">82%</div>
                                <div class="insight-metric-label">相关性</div>
                            </div>
                        </div>
                        <div style="margin-top: 10px;">
                            <button class="btn btn-sm btn-secondary" onclick="viewInsightDetails(3)">查看详情</button>
                            <button class="btn btn-sm btn-secondary" onclick="createAction(3)">创建行动计划</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 分析工具标签内容 -->
            <div id="tools-content" class="tab-content" style="display: none;">
                <div class="grid-layout">
                    <div class="card">
                        <div class="card-header">客户细分分析</div>
                        <div class="analysis-tool">
                            <div class="analysis-tool-header">
                                <div>RFM分析</div>
                                <button class="btn btn-sm btn-secondary">运行</button>
                            </div>
                            <div>根据最近购买、购买频率和购买金额对客户进行细分</div>
                            <div class="analysis-result">
                                <strong>上次分析结果:</strong> 识别了4个关键客户细分，其中"忠诚高价值"群体占总收入的35%
                            </div>
                        </div>
                        <div class="analysis-tool">
                            <div class="analysis-tool-header">
                                <div>购买行为聚类</div>
                                <button class="btn btn-sm btn-secondary">运行</button>
                            </div>
                            <div>使用K-means聚类算法根据购买模式识别相似客户群体</div>
                            <div class="analysis-result">
                                <strong>上次分析结果:</strong> 发现了3个主要购买模式，季节性购买者是最有价值的重点客户
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">相关性分析</div>
                        <div class="analysis-tool">
                            <div class="analysis-tool-header">
                                <div>变量相关性分析</div>
                                <button class="btn btn-sm btn-secondary">运行</button>
                            </div>
                            <div>计算指定变量之间的相关系数，找出强相关和弱相关的关系</div>
                            <div class="correlation-matrix">
                                <div class="correlation-cell" style="background-color: #e3f2fd;">产品特性</div>
                                <div class="correlation-cell" style="background-color: #e3f2fd;">价格</div>
                                <div class="correlation-cell" style="background-color: #e3f2fd;">质量</div>
                                <div class="correlation-cell" style="background-color: #e3f2fd;">支持</div>
                                
                                <div class="correlation-cell" style="background-color: #e3f2fd;">产品特性</div>
                                <div class="correlation-cell" style="background-color: #e8f5e9;">1.0</div>
                                <div class="correlation-cell" style="background-color: #fff8e1;">0.35</div>
                                <div class="correlation-cell" style="background-color: #e8f5e9;">0.72</div>
                                
                                <div class="correlation-cell" style="background-color: #e3f2fd;">价格</div>
                                <div class="correlation-cell" style="background-color: #fff8e1;">0.35</div>
                                <div class="correlation-cell" style="background-color: #e8f5e9;">1.0</div>
                                <div class="correlation-cell" style="background-color: #fff8e1;">0.28</div>
                                
                                <div class="correlation-cell" style="background-color: #e3f2fd;">质量</div>
                                <div class="correlation-cell" style="background-color: #e8f5e9;">0.72</div>
                                <div class="correlation-cell" style="background-color: #fff8e1;">0.28</div>
                                <div class="correlation-cell" style="background-color: #e8f5e9;">1.0</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="grid-layout">
                    <div class="card">
                        <div class="card-header">销售漏斗分析</div>
                        <div class="analysis-tool">
                            <div class="analysis-tool-header">
                                <div>阶段转化率分析</div>
                                <button class="btn btn-sm btn-secondary">运行</button>
                            </div>
                            <div>分析销售漏斗各阶段之间的转化率，识别瓶颈</div>
                            <div class="chart-container">
                                <img src="https://via.placeholder.com/550x250?text=销售漏斗分析图表" alt="销售漏斗分析" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">文本分析</div>
                        <div class="analysis-tool">
                            <div class="analysis-tool-header">
                                <div>反馈情感分析</div>
                                <button class="btn btn-sm btn-secondary">运行</button>
                            </div>
                            <div>分析客户反馈的情感，识别常见主题和关键词</div>
                            <div class="chart-container">
                                <img src="https://via.placeholder.com/550x250?text=反馈情感分析图表" alt="反馈情感分析" style="width: 100%; height: 100%; object-fit: cover;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 预测模型标签内容 -->
            <div id="models-content" class="tab-content" style="display: none;">
                <div class="filter-row">
                    <div class="filter-item">
                        <label>模型类型</label>
                        <select id="modelTypeFilter">
                            <option value="">所有类型</option>
                            <option value="classification">分类模型</option>
                            <option value="regression">回归模型</option>
                            <option value="clustering">聚类模型</option>
                            <option value="time-series">时间序列</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>状态</label>
                        <select id="modelStatusFilter">
                            <option value="">所有状态</option>
                            <option value="active">已部署</option>
                            <option value="training">训练中</option>
                            <option value="draft">草稿</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>搜索</label>
                        <input type="text" id="modelSearch" placeholder="搜索模型...">
                    </div>
                </div>
                
                <div class="model-list">
                    <div class="model-card">
                        <div class="model-title">客户流失预测</div>
                        <div class="model-meta">
                            <div>类型: 分类模型 | 算法: 随机森林 | 精确度: 87% | 状态: 已部署</div>
                            <div>创建于: 2023-03-15 | 最后更新: 2023-05-10</div>
                        </div>
                        <div>
                            该模型预测未来30天内可能流失的客户，基于客户互动、产品使用和支持案例数据。
                        </div>
                        <div class="model-actions">
                            <button class="btn btn-sm btn-secondary" onclick="viewModelDetails(1)">查看详情</button>
                            <button class="btn btn-sm btn-secondary" onclick="runPrediction(1)">运行预测</button>
                            <button class="btn btn-sm btn-secondary" onclick="editModel(1)">编辑</button>
                        </div>
                    </div>
                    
                    <div class="model-card">
                        <div class="model-title">销售额预测</div>
                        <div class="model-meta">
                            <div>类型: 时间序列 | 算法: ARIMA | 精确度: 91% | 状态: 已部署</div>
                            <div>创建于: 2023-02-20 | 最后更新: 2023-04-28</div>
                        </div>
                        <div>
                            基于历史销售数据、季节性趋势和市场指标，预测未来3个月的销售额。
                        </div>
                        <div class="model-actions">
                            <button class="btn btn-sm btn-secondary" onclick="viewModelDetails(2)">查看详情</button>
                            <button class="btn btn-sm btn-secondary" onclick="runPrediction(2)">运行预测</button>
                            <button class="btn btn-sm btn-secondary" onclick="editModel(2)">编辑</button>
                        </div>
                    </div>
                    
                    <div class="model-card">
                        <div class="model-title">客户终身价值预测</div>
                        <div class="model-meta">
                            <div>类型: 回归模型 | 算法: 梯度提升 | 精确度: 84% | 状态: 训练中</div>
                            <div>创建于: 2023-05-05 | 预计完成: 2023-05-22</div>
                        </div>
                        <div>
                            预测客户在未来24个月内的潜在价值，帮助优化客户获取和维系策略。
                        </div>
                        <div class="model-actions">
                            <button class="btn btn-sm btn-secondary" onclick="viewModelDetails(3)">查看详情</button>
                            <button class="btn btn-sm btn-secondary" onclick="checkTrainingStatus(3)">查看训练状态</button>
                            <button class="btn btn-sm btn-secondary" onclick="editModel(3)">编辑</button>
                        </div>
                    </div>
                    
                    <div class="model-card">
                        <div class="model-title">市场细分聚类</div>
                        <div class="model-meta">
                            <div>类型: 聚类模型 | 算法: K-means | 簇数: 5 | 状态: 已部署</div>
                            <div>创建于: 2023-01-10 | 最后更新: 2023-03-25</div>
                        </div>
                        <div>
                            根据客户属性、行为和购买历史，将客户自动分为5个不同的市场细分。
                        </div>
                        <div class="model-actions">
                            <button class="btn btn-sm btn-secondary" onclick="viewModelDetails(4)">查看详情</button>
                            <button class="btn btn-sm btn-secondary" onclick="runPrediction(4)">运行分群</button>
                            <button class="btn btn-sm btn-secondary" onclick="editModel(4)">编辑</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 趋势探索标签内容 -->
            <div id="trends-content" class="tab-content" style="display: none;">
                <div class="filter-row">
                    <div class="filter-item">
                        <label>数据类别</label>
                        <select id="trendDataCategory">
                            <option value="sales">销售数据</option>
                            <option value="customer">客户数据</option>
                            <option value="service">服务数据</option>
                            <option value="product">产品数据</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>时间范围</label>
                        <select id="trendTimeRange">
                            <option value="quarter">最近一季度</option>
                            <option value="six-months">最近六个月</option>
                            <option value="year">最近一年</option>
                            <option value="two-years">最近两年</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>显示方式</label>
                        <select id="trendViewMode">
                            <option value="line">折线图</option>
                            <option value="bar">柱状图</option>
                            <option value="table">数据表</option>
                        </select>
                    </div>
                    <div style="margin-top: 24px;">
                        <button class="btn btn-primary" onclick="updateTrend()">更新</button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <div>销售趋势分析</div>
                        <div>
                            <button class="btn btn-sm btn-secondary" onclick="exportTrendData('png')">PNG</button>
                            <button class="btn btn-sm btn-secondary" onclick="exportTrendData('csv')">CSV</button>
                            <button class="btn btn-sm btn-secondary" onclick="saveTrendView()">保存视图</button>
                        </div>
                    </div>
                    <div style="height: 400px; margin-bottom: 20px;">
                        <img src="https://via.placeholder.com/1100x400?text=趋势图表" alt="趋势图表" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    
                    <div class="analysis-result">
                        <h3>趋势分析</h3>
                        <p>过去12个月的销售呈现季节性波动，第二季度有15%的下滑，随后在第三季度恢复并增长20%。北方市场的增长速度是南方市场的2倍。企业客户销售额增长32%，而个人客户仅增长8%。</p>
                        
                        <h3>异常检测</h3>
                        <p>在2023年3月中旬检测到销售异常增长，与新产品发布时间吻合。另有一处异常下滑出现在2023年8月，可能与夏季假期和市场推广活动减少有关。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            // 标签切换
            function switchTab(tabId) {
                // 隐藏所有标签内容
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.style.display = 'none';
                });
                
                // 取消所有标签的激活状态
                document.querySelectorAll('.tab').forEach(tab => {
                    tab.classList.remove('active');
                });
                
                // 显示选中的标签内容
                document.getElementById(tabId + '-content').style.display = 'block';
                
                // 激活选中的标签
                document.querySelector(`.tab[onclick="switchTab('${tabId}')"]`).classList.add('active');
            }
            
            // 创建分析
            function createAnalysis() {
                alert('打开创建分析向导');
            }
            
            // 查看洞察详情
            function viewInsightDetails(insightId) {
                alert('查看洞察 ID: ' + insightId + ' 的详细信息');
            }
            
            // 创建行动计划
            function createAction(insightId) {
                alert('为洞察 ID: ' + insightId + ' 创建行动计划');
            }
            
            // 查看模型详情
            function viewModelDetails(modelId) {
                alert('查看模型 ID: ' + modelId + ' 的详细信息');
            }
            
            // 运行预测
            function runPrediction(modelId) {
                alert('运行模型 ID: ' + modelId + ' 的预测');
            }
            
            // 编辑模型
            function editModel(modelId) {
                alert('编辑模型 ID: ' + modelId);
            }
            
            // 查看训练状态
            function checkTrainingStatus(modelId) {
                alert('查看模型 ID: ' + modelId + ' 的训练状态');
            }
            
            // 更新趋势图表
            function updateTrend() {
                const category = document.getElementById('trendDataCategory').value;
                const timeRange = document.getElementById('trendTimeRange').value;
                const viewMode = document.getElementById('trendViewMode').value;
                
                alert('更新趋势图表：类别=' + category + ', 时间范围=' + timeRange + ', 显示方式=' + viewMode);
            }
            
            // 导出趋势数据
            function exportTrendData(format) {
                alert('导出趋势数据为 ' + format.toUpperCase() + ' 格式');
            }
            
            // 保存趋势视图
            function saveTrendView() {
                alert('保存当前趋势视图配置');
            }
        </script>
    </th:block>
</body>
</html> 